<template>
	<view class='date-bar'>
		<swiper :current='currentWeekIndex' class='week-list' @change='changeWeek' duration='10'>
			<swiper-item v-for="(dayList, weekIndex) in weekList" :key="weekIndex" vertical="true">
				<view class='week-block'>
					<block v-for="(day, dayIndex) in dayList" :key="dayIndex">
						<view class='week-item' @click="clickDate" :data-date="day.dateStr" v-if="day.currdate_flag==1">
							<view class='date-currdate cor-white bgcor-b' v-if='day.selected_flag==1'>今</view>
							<view class='date-currdate cor-white bgcor-o' v-if='day.selected_flag==0'>今</view>
						</view>
						<view class='week-item' @click="clickDate" :data-date="day.dateStr" v-else>
							<view class='date-week' :class='day.selected_flag==1?"cor-b":""'>{{day.week}}</view>
							<view class='date-day' :class='day.selected_flag==1?"cor-b":""'>{{day.day}}</view>
						</view>
					</block>
				</view>
			</swiper-item>
		</swiper>
		<view class='date-picker'>
			<image src='/static/image/ico-calendar-blue.png' mode='widthFix' class='i2' @click="popCalendar"></image>
			<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="calendarConfig.clearDate" :insert="calendarConfig.insert" :lunar="calendarConfig.lunar" :showMonth='calendarConfig.showMonth'
				:date='strSelected' @confirm="confirmCalendar" @close="hideCalendar" @change="changeCalendar" @monthSwitch="monthSwitchCalendar"/>
		</view>
	</view>
</template>

<script>
	import gui from '@/lib/gui.js';
	import https from '@/lib/https.js';
	import dateutil from '@/lib/dateutil.js';
	
	export default {
		name:"weekdaypicker",
		props: {
			date: {
				type: String,
				default: '',
				required: true,
				validator: function(value) {
					if(value!=null && value!=''){
						console.log(/^\d{4}-\d{2}-\d{2}$/.test(value));
						return /^\d{4}-\d{2}-\d{2}$/.test(value);
					}else{
						return true;
					}
				}
			}
		},
		data() {
			return {
				strSelected: '',
				calendarConfig: {
					lunar: false,
					range: false,
					insert: false,
					showMonth: true,
					clearDate: false,
					selected: []
				},
				currentWeekIndex: 1,
				weekList: []
			};
		},

		mounted(){
			gui.init(this);
			console.log(this.date);
			this.genDateLabels(dateutil.parseDate(this.date), this.date);
			//this.genDateLabels(dateutil.getCurrDate(), dateutil.formatDate(dateutil.getCurrDate()));
		},
		
		methods: {
			
			genDateLabels(dtSelected, strSelected){
				this.dtSelected=dtSelected;
				this.strSelected=strSelected;
				var arr = [];
				arr.push(dateutil.genWeekLabels(dateutil.getDateWithOffsetWeek(dtSelected, -1)));
				arr.push(dateutil.genWeekLabels(dtSelected));
				arr.push(dateutil.genWeekLabels(dateutil.getDateWithOffsetWeek(dtSelected, 1)));
				this.weekList=arr;
				this.flushWeek();
			},
			
			changeWeek(e){
				this.currentWeekIndex=e.detail.current;
				if(this.currentWeekIndex<1){
					this.dtSelected=dateutil.getDateWithOffsetWeek(this.dtSelected, -1);
					this.genDateLabels(this.dtSelected, this.strSelected);
				}else if(this.currentWeekIndex>1){
					this.dtSelected=dateutil.getDateWithOffsetWeek(this.dtSelected, 1);
					this.genDateLabels(this.dtSelected, this.strSelected);
				}
			},
			
			clickDate(e){
				this.strSelected=e.currentTarget.dataset.date;
				this.flushWeek();
			},
			
			flushWeek(){
				var weekList = this.weekList;
				var strCurrDate = dateutil.formatDate(dateutil.getCurrDate());
				for(var i=0; i<weekList.length; i++){
					for(var j=0; j<weekList[i].length; j++){
						if(weekList[i][j].dateStr == strCurrDate){
							weekList[i][j].currdate_flag = 1;
						}else{
							weekList[i][j].currdate_flag = 0;
						}
						
						if(weekList[i][j].dateStr == this.strSelected){
							weekList[i][j].selected_flag = 1;
						}else{
							weekList[i][j].selected_flag = 0;
						}
					}
				}
				this.weekList=weekList;
				this.$nextTick(function() {
					this.currentWeekIndex=1;
				});
			},
			
			popCalendar() {
				this.$refs.calendar.open();
			},
			
			hideCalendar(){
				console.log('弹窗关闭');
			},
			
			changeCalendar(e) {
				console.log('change 返回:', e)
				if (this.info.selected.length > 5) return
				this.info.selected.push({
					date: e.fulldate,
					info: '打卡'
				})
			},
			
			confirmCalendar(e) {
				var strDate = e.fulldate;
				if(this.strSelected != strDate){
					var dtDate = new Date(strDate);
					this.genDateLabels(dtDate, strDate);
					console.log('strDate = ' + strDate);
					this.$emit('changeDate', strDate);
				}
			},
			
			monthSwitchCalendar(e) {
				console.log('monthSwitchs 返回:', e)
			}
		
		}
	}
</script>

<style>
	.date-bar{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.week-list{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 90%;
		height: 60px;
	}
	
	.date-picker{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 10%;
	}
	
	.week-block{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 60px;
	}
	
	.week-item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 14%;
		font-size: 14px;
		color: #999;
	}
	
	.date-currdate{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 14%;
		height: 32px;
		width: 32px;
		border-radius: 100%;
		font-weight: bold;
		font-size: 16px;
	}
	
	.date-week{
		font-weight: bold;
	}
	
	.date-day{
		
	}
</style>